<template>
  <div>
    <n-space style="margin-bottom: 10px;">
      <n-upload :action="upload.action" :headers="upload.headers" :show-file-list="false" accept=".xlsx"
        @finish="uploadSuccess"><n-button type="primary">上传数据模版</n-button></n-upload>
      <n-button @click="downloadTemplate">下载模版</n-button>
    </n-space>

    <n-card title="食品 & 动作" style="margin-bottom: 16px">
      <n-tabs type="line" animated>
        <n-tab-pane name="foods" tab="食品">
          <ocean :use="foodsTemplate"></ocean>
        </n-tab-pane>
        <n-tab-pane name="sports" tab="动作">
          <ocean :use="sportsTemplate"></ocean>
        </n-tab-pane>
      </n-tabs>
    </n-card>

    <!-- <ocean :use="drawer"></ocean> -->
  </div>
</template>
<script lang="tsx" setup>
import { useTableTemplate, useDrawer } from '@/ocean';
import { GlobalAPI, HealthAPI } from '@/app/api';
import { useDialog, useMessage } from 'naive-ui';

const dialog = useDialog()
const message = useMessage()

const upload = HealthAPI.upload();

const uploadSuccess = ({ event }) => {
  const res = JSON.parse(event.target.response);
  message.success(res.msg)
}

const downloadTemplate = () => {
  HealthAPI.download();
}

const foodsTemplate = useTableTemplate<any, any>('食品列表', {
  query: data => HealthAPI.queryList({ type: 1, ...data }).then(({ data, total }) => {
    foodsTemplate.table.setData(data);
    foodsTemplate.pagination.setCount(total);
  })
});

foodsTemplate.form.item('食品名称', 'name').input();
foodsTemplate.table.column('食品名称', 'name');
foodsTemplate.table.column('重量', 'unit');
foodsTemplate.table.column('摄入热量(kcal)', 'kcal');

foodsTemplate.query()

const sportsTemplate = useTableTemplate<any, any>('动作列表', {
  query: data => HealthAPI.queryList({ type: 2, ...data }).then(({ data, total }) => {
    sportsTemplate.table.setData(data);
    sportsTemplate.pagination.setCount(total);
  })
});

sportsTemplate.form.item('动作名称', 'name').input();
sportsTemplate.table.column('动作名称', 'name');
sportsTemplate.table.column('时长', 'unit');
sportsTemplate.table.column('消耗热量(kcal)', 'kcal');

sportsTemplate.query()
</script>